<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="section1" :style="color:red ">10年后</div>
    <div id="section2">5年后</div>
    <div id="section3">1年后</div>
</body>

</html>
<script>
   class myclass{
       constructor(res){
          var kk = document.querySelector(res.el)
          kk.onclick = function(){
              res.run()
          }
          kk.style.background = res.background
          kk.style.color = res.color
          kk.style.width = res.width
          kk.style.height = res.height
       }
   }

   
   var ss = new myclass({
       el:'#section1',
       background:'red',
       width:'100px',
       height:'100px',
     run:function(){
         alert('点击')
     }
   })
   var ss = new myclass({
       el:'#section2',
       background:'black',
       width:'200px',
       color:'white',
       height:'100px',
     run:function(){
         alert('点击呀')
     }
   })
   var ss = new myclass({
       el:'#section3',
       background:'gray',
       width:'100px',
       height:'200px',
     run:function(){
         alert('点击一下')
     }
   })

</script>
<style>
 
</style>